<template>
	<div>
		<el-dialog :title="title" v-model="dialogVisible" class="redius8" width="1200" center :before-close="handleClose">
			<el-scrollbar style="height: 700px;">
				<el-form :model="form" :rules="rules" ref="queryRefs" :inline="true" label-width="106px">
					<div class="bgWhite radius8">
						<div class="p20">
							<div class="fb fs16 color333 mb20 pl10">
								基础信息
							</div>
							<el-form-item label="商品类型" prop="commodityType">
								<el-select size="large" :disabled="disabled" v-model="form.commodityType" placeholder="请选择" style="width: 248px;">
									<el-option v-for="dict in bus_product_type" :key="dict.value" :label="dict.label"
										:value="dict.value" />
								</el-select>
							</el-form-item>
							<el-form-item label="关联产品" prop="productName" v-if="form.commodityType != 1003">
								<!-- @focus="chooseProduct" -->
								<el-select  :disabled="disabled" v-model="form.productName" filterable remote reserve-keyword 
								style="width: 182px;" @change="changeProduct"
									size="large" placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading1">
									<el-option v-for="item in productList" 
									:key="item.id" :label="item.productName"
										:value="item.id">
									</el-option>
								</el-select>
								<span class="main-color ml10 cursor" @click="productDetail()">查看详情</span>
							</el-form-item>
							<el-form-item label="商品名称" prop="commodityName" style="margin-right: 0;">
								<el-input size="large" :disabled="disabled" v-model="form.commodityName" style="width: 248px" placeholder="请填写" />
							</el-form-item>
							<el-form-item label="商品ID" prop="commodityCode">
								<el-input size="large" :disabled="disabled" v-model="form.commodityCode" style="width: 248px" placeholder="请填写" />
							</el-form-item>
							<el-form-item label="最小单位" prop="minUnit">
								<el-input size="large" :disabled="disabled" v-model="form.minUnit" style="width: 248px" placeholder="请填写" />
							</el-form-item>
							<el-form-item label="商品单价" prop="caseQuantity" v-if="form.commodityType == 1003">
								<el-input size="large" :disabled="disabled" v-model="form.caseQuantity" style="width: 248px" placeholder="请填写" />
							</el-form-item>
							<el-form-item label="整件数量" prop="caseQuantity" style="margin-right: 0;">
								<el-input size="large" :disabled="disabled" v-model="form.caseQuantity" style="width: 248px" 
								placeholder="请填写" @input="lineCountPrice()" />
							</el-form-item>
							<el-form-item label="单位含量" prop="unitContent" v-if="form.commodityType != 1003">
								<el-input v-model="form.unitContent" :disabled="disabled" placeholder="请输入内容" 
								class="input-with-select" size="large"  @input="lineCountPrice()"
									style="width: 248px;">
									<template #append>
										kg
										<!-- <el-select size="large"  :disabled="disabled" v-model="form.contentUnit" placeholder="请选择"
											style="width: 100px;">
											<el-option v-for="dict in bus_active_ingredient_content" :key="dict.value"
												:label="dict.label" :value="dict.value" />
										</el-select> -->
									</template>
								</el-input>
							</el-form-item>
							<el-form-item label="商品规格" prop="specificationId">
								<el-select size="large" :disabled="disabled" v-model="form.specificationId" placeholder="请选择"
									style="width: 248px;">
									<el-option v-for="dict in bus_product_specification_unit" :key="dict.value"
										:label="dict.label" :value="dict.value" />
								</el-select>
							</el-form-item>
							<el-form-item label="商品分类" prop="classifyId"  style="margin-right: 0;">
								<el-tree-select size="large" :disabled="disabled" v-model="form.classifyId" 
								:data="cateOptions"
									 @node-click="changeTree"
									  :props="{
								      value: 'id',
								      label: 'name',
								      children: 'children',
								   }" value-key="id" placeholder="请选择" check-strictly
									style="width: 248px"
									/>
							</el-form-item>
							
							<el-form-item label="套餐商品" prop="isPackage">
								<el-radio-group :disabled="disabled" v-model="form.isPackage">
									<el-radio v-for="dict in isPackage" :key="dict.value" :label="dict.value"
										:value="dict.value" size="large">
										{{dict.label}}
									</el-radio>
								</el-radio-group>
							</el-form-item>
							<br>
							<el-form-item label="商品主图" prop="mainImageUrl" style="width: 350px;">
								<el-upload
								v-if="form.mainImageUrl == ''"
								 name="file" :disabled="disabled" class="avatar-uploader"
								 :action="url" :headers="headers"
								 :limit='1'
								 accept=".jpeg,.jpg,.png"
									:show-file-list="false" :on-success="handleAvatarSuccess"
									:before-upload="beforeAvatarUpload">
									<div>
										<el-icon class="avatar-uploader-icon">
											<Plus />
										</el-icon>
										<div class="fs12">上传图片</div>
									</div>
								</el-upload>
								<div class="relative" v-else>
									<el-image
									  class="radius8"
									  style="width: 110px; height: 110px"
									  :src="form.mainImageUrl" 
									  :preview-src-list="[form.mainImageUrl]">
									</el-image>
									<div 
									@click="form.mainImageUrl = ''"
									class="absolute fs18 cursor" style="z-index: 1;width: 18px; height: 18px;top: -12px; right: -7px;border-radius: 50%;background-color: #fff;">
										<el-icon><CircleCloseFilled /></el-icon>
									</div>
								</div>
							</el-form-item>
							<br>
							<el-form-item label="备注信息" prop="remark" label-width="106" v-if="form.commodityType == 1003">
								<el-input size="large" :disabled="disabled" type="textarea" resize="none" class="textReset" style="width: 575px;"
									:rows="5" v-model="form.remark" placeholder="请输入信息" />
							</el-form-item>
						</div>
						<div class="pl20 pr20" v-if="form.commodityType != 1003">
							<div class="fb fs16 color333 mb30 pl10">
								线上渠道价格
							</div>
							<el-form-item label="单价(元)" prop="onlineUnitPrice">
								<el-input size="large" :disabled="disabled" type="number" min="0" v-model="form.onlineUnitPrice" style="width: 246px" placeholder="请填写" />
							</el-form-item>
							<el-form-item label="箱价(元)" prop="caseUnitPrice">
								<el-input size="large" :disabled="disabled" type="number" min="0"
								v-model="form.caseUnitPrice" style="width: 246px" placeholder="请填写"
								  @input="onLine()" 
								 />
							</el-form-item>
							<el-form-item label="吨位(元)" prop="tonPrice" style="margin-right: 0;">
								<el-input size="large" :disabled="disabled" type="number" min="0" v-model="form.tonPrice"
								@blur="onLine()" 
								 style="width: 248px" placeholder="请填写" />
							</el-form-item>
							<el-form-item label="折算箱价(元)" prop="boxConversionUnitPrice">
								<el-input size="large" :disabled="true" type="number" min="0"
								 v-model="form.boxConversionUnitPrice" style="width: 246px" 
								 placeholder="请填写"/>
							</el-form-item>
							<el-form-item label="折算吨价(元)" prop="tonConversionUnitPrice">
								<el-input size="large" :disabled="true" type="number" min="0"
								v-model="form.tonConversionUnitPrice" style="width: 248px" placeholder="请填写" />
							</el-form-item>
							<el-form-item label="提成系数" prop="commission" style="margin-right: 0;">
								<el-input size="large" :disabled="disabled" type="number" min="0" v-model="form.commission" style="width: 248px" placeholder="请填写" />
							</el-form-item>
						</div>
						<div class="p20" v-if="form.commodityType != 1003">
							<div class="fb mb20 pl10 flex col-center row-between">
								<span class=" fs16 color333">
									线下渠道价格
								</span>
								<el-button type="defaultBtn" @click="handleAdd"
								v-if="!disabled"
								>新增
								</el-button>
							</div>
							<el-table :data="form.offlinePrices" style="width: 100%;"
								:header-row-style="{background:'#FAFAFA',color:'#0C1019',height:'54px'}"
								:cell-style="{height:'54px'}">
								<el-table-column label="单件（元/最小单位）" align="center" width="180px">
									<template #default="scope">
										<el-input type="number" :disabled="disabled" min="0" 
										@blur="isCheckLine(scope.row.factoryPrice)"
										v-model="scope.row.factoryPrice" style="width: 120px" size="large"
											placeholder="请输入" />
									</template>
								</el-table-column>
								<el-table-column label="箱价（元/最小单位）" align="center" width="180px">
									<template #default="scope">
										<el-input type="number" :disabled="disabled" min="0" v-model="scope.row.customPrice" 
										style="width: 120px" size="large"
											placeholder="请输入" @input="Offline()" />
									</template>
								</el-table-column>
								<el-table-column label="吨位（元/吨）" align="center" width="180px">
									<template #default="scope">
										<el-input type="number" :disabled="disabled" min="0" v-model="scope.row.tonPrice" 
										style="width: 120px" size="large" @input="Offline()"
											placeholder="请输入" />
									</template>
								</el-table-column>
								<el-table-column label="折算箱价" align="center" width="180px">
									<template #default="scope">
										<el-input type="number" :disabled="true" min="0" v-model="scope.row.boxConversionUnitPrice" style="width: 120px" size="large"
											placeholder="请输入" />
									</template>
								</el-table-column>
								<el-table-column label="折算吨价" align="center" width="180px">
									<template #default="scope">
										<el-input type="number" :disabled="true" min="0" v-model="scope.row.tonConversionUnitPrice" style="width: 120px" size="large"
											placeholder="请输入" />
									</template>
								</el-table-column>
								<el-table-column label="提成系数" align="center" width="180px">
									<template #default="scope">
										<el-input type="number" :disabled="disabled" min="0" v-model="scope.row.commission" style="width: 120px" size="large"
											placeholder="请输入" />
									</template>
								</el-table-column>
								<el-table-column label="应用范围" align="center" width="500">
									<template #default="scope">
										<div class="flex col-center">
											此规则应用范围：
											<div v-if="scope.$index == 0">
												此规则应用范围：全部部门（特殊部门除外）
											</div>
											<el-tree-select :disabled="disabled" v-else  size="large" 
											v-model="scope.row.departmentIds1" :data="deptOptions"
											:multiple="true"
											@node-click="changeTree"
											 :props="{
											   value: 'deptId',
											   label: 'deptName',
											   children: 'children',
											}"  placeholder="请选择" 
											value-key="deptId"
											show-checkbox
											 @check-change="handleCheckChange"
											 style="width: 360px;"
											 />
										</div>
									</template>
								</el-table-column>
								<el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width"
									width="80px" v-if="!disabled">
									<template #default="scope">
										<span class="color-red cursor" v-if="scope.$index != 0"
											@click="del(scope.$index)">删除</span>
									</template>
								</el-table-column>
							</el-table>
							<br>
							<el-form-item label="备注信息" prop="remark" label-width="80">
								<el-input size="large" :disabled="disabled" type="textarea" resize="none" class="textReset" style="width: 575px;"
									:rows="5" v-model="form.remark" placeholder="请输入信息" />
							</el-form-item>
						</div>
						
					</div>
				</el-form>
			</el-scrollbar>	
			<div class="text-center mt25" v-if="!disabled">
				<el-button type="defaultBtn" @click="submitProduct('queryRefs')" style="height: 38px;">
					{{form.id == '' ? '创建' :'编辑'}}商品
				</el-button>
				<el-button type="operate" style="width: 88px;height: 38px;" v-if="id == ''"
					@click="resetQuery()">重 置</el-button>
				<el-button style="width: 88px;height: 38px;" @click="dialogVisible = false">取 消</el-button>
			</div>
			<!-- 产品弹窗 -->
			<productListPop ref="dialog" @productIds="productIds"></productListPop>
			<!-- //产品详情 -->
			<operateProduct ref="productPop"></operateProduct>
		</el-dialog>	
	</div>
</template>

<script>
	import {
		listGoods, //商品列表
		addGoods,//添加商品
		getGoods, //商品详情
		updateGoods, //修改商品
		listProduct,//产品列表
		listClassify1,
	} from "@/api/business/product";
	import {
		getCustomerDetail
	} from "@/api/business/customer";
	import {
		getDivisions
	} from "@/api/business/opportunity";
	import {
		getOpportunityInfo,
		listOpportunity,
		teamAllocation,
		teamReceive,
		getUserListData
	} from "@/api/business/teamOpportunity";
	import {
	   listDept,//査部门
	} from "@/api/system/dept";
	import {
		resetForm,
		getUserInfo
	} from '@/utils/ruoyi'
	import {
		getToken
	} from "@/utils/auth";
	let url = import.meta.env.VITE_APP_BASE_API + "/common/upload"
	import productListPop from "./index.vue"
	import operateProduct from "@/views/business/product/components/operateProduct.vue"
	export default {
		components:{
			operateProduct,
			productListPop
		},
		data(){
			return{
				bus_product_type:this.useDict('bus_product_type').bus_product_type,//商品类型
				bus_active_ingredient_content:this.useDict('bus_active_ingredient_content').bus_active_ingredient_content,//含量单位
				bus_product_specification_unit:this.useDict('bus_product_specification_unit').bus_product_specification_unit,//商品规格
				dialogVisible:false,
				title:'',
				headers: {
					Authorization: 'Bearer ' + getToken() 
				},
				url: url,
				cateOptions:[],//商品分类
				isPackage:[
					{
						value:1,
						label:'是'
					},
					{
						value:0,
						label:'否'
					}
				],
				form: {
					id: '',
					classifyId: '',
					commodityType: '', //产品类型
					productId: '', //关联产品id
					specificationId: '', //
					commodityName: '', //商品名称
					commodityCode: '', //商品id
					commodityPublic: '', //是否公海0=正常1=部门公海2=公司公海
					minUnit: '', //最小单位
					caseQuantity: '', //整件数量
					commission:'',//提成系数
					isPackage:0,//是否是套餐商品，默认不是
					unitContent: '', //单位含量
					contentUnit: '1004', //含量单位
					mainImageUrl: '', //商品主图
					onlineUnitPrice: '', //线上拆箱单价
					caseUnitPrice: '', //整箱单价
					tonPrice: '', //吨价
					boxConversionUnitPrice:'',//折算箱价
					tonConversionUnitPrice:'',//折算吨价
					offlinePrices: [{
						factoryPrice: '', //出厂价格
						customPrice: '', //定制价格
						tonPrice: '', //吨价
						departmentIds:'', //应用范围（部门ID，逗号分隔）0代表全部
						departmentIds1:'',
						remark: '', //备注
					}],
					remark: '', //备注
				},
				rules: {
					commodityType:[
						{
							required: true,
							message: '请选择商品类型',
							trigger: 'change'
						}	
					],
					commodityName: [{
						required: true,
						message: '请输入商品名称',
						trigger: 'blur'
					}],
					productId:[
						{
							required: true,
							message: '请输入关联产品',
							trigger: 'change'
						}	
					],
					caseQuantity: [{
						required: true,
						message: '请输入整件数量',
						trigger: 'blur'
					}],
					onlineUnitPrice: [
						{required: true,message: '请输入拆箱单价',trigger: 'blur'},
					],
					caseUnitPrice: [
						{required: true,message: '请输入箱价',trigger: 'blur'},
					],
					tonPrice: [
						{required: true,message: '请输入吨位',trigger: 'blur'},
					],
					specificationId:[
						{
							required: true,
							message: '请输入商品规格',
							trigger: 'blur'
						}
					],
					commission:[
						{
							required: true,
							message: '请输入',
							trigger: 'blur'
						}
					],
				},
				loading: false,
				deptOptions: [], //部门
				cropNameArr: [], //作物名称
				productList: [], //产品名称
				// options: [],//产品列表
				loading1: false,
				disabled:''
			}
		},
		created() {
			this.getTree()
		},
		methods:{
			isCheckLine(value){
				// if (!value) {
				// 	this.$modal.msgError('输入不可以为空')
				// 	return false;
				// }
				// if(value*1 == 0){
				// 	this.$modal.msgError('输入的数值不能为0')
				// 	return false;
				// }else if(value*1 < 0){
				// 	this.$modal.msgError('输入的数值不能小于0')
				// 	return false;
				// }
			},
			isCheck(rule, value, callback){
				// if (!value) {
				// 	return callback(new Error('输入不可以为空'));
				// }
				// if(value*1 == 0){
				// 	return callback(new Error('输入的数值不能为0'))
				// }else if(value*1 < 0){
				// 	return callback(new Error('输入的数值不能小于0'))
				// }
			},
			// 产品图
			handleAvatarSuccess(e) {
				this.form.mainImageUrl = e.url
			},
			beforeAvatarUpload(file) {
				// console.log(file.size / 1024 / 1024,'pppppp')
				// return false;
				// if (file.size / 1024 / 1024 > this.maxSize) {
				// 	this.$message.error({
				// 	  message: `上传文件大小不能超过${this.maxSize}M!`,
				// 	});
				// 	return false;
				// }
			},
			changeProduct(e){
				this.form.productId = e
			},
			//查看产品详情
			productDetail(){
				this.$refs.productPop.open(this.form.productId,1)
			},
			//整件数量  单位含量改变，重新计算线上/线下渠道的折算：箱价/吨价
			lineCountPrice(){
				this.onLine()
				this.Offline()
			},
			//线上渠道折算箱价
			onLine(){
				//箱价/整件数量
				this.form.boxConversionUnitPrice = (this.form.caseUnitPrice / this.form.caseQuantity).toFixed(2)
				//吨价/(1000/单位含量)
				this.form.tonConversionUnitPrice = (this.form.tonPrice / (1000 / this.form.unitContent)).toFixed(2)
			},
			//线下渠道折算价格/吨价
			Offline(){
				for(let key in this.form.offlinePrices){
					// 折算箱价
					this.form.offlinePrices[key].boxConversionUnitPrice = (this.form.offlinePrices[key].customPrice / this.form.caseQuantity).toFixed(2)
					// 折算吨价
					this.form.offlinePrices[key].tonConversionUnitPrice = (this.form.offlinePrices[key].tonPrice / (1000 / this.form.unitContent)).toFixed(2)
				}
			},
			//
			handleClose(){
				this.dialogVisible = false
			},
			open(num,disabled){
				this.disabled = disabled
				if(this.resetQuery()){
					if(num == ''){
						this.title = '新增商品'
					}else if(num !='' && !disabled){
						this.title = '编辑商品'
						this.form.id = num
						this.getProduct()
						this.getDetail()
					}else{
						this.title = '商品详情'
						this.form.id = num
						this.getProduct()
						this.getDetail()
					}
					this.dialogVisible = true
				}
			},
			// 详情
			getDetail() {
				getGoods(this.form.id).then(res => {
					this.form = res.data
					//如果产品是否为套餐为空，默认否
					if(this.form.isPackage == '' || this.form.isPackage == false){
						this.form.isPackage = 0
					}else{
						this.form.isPackage = 1
					}
					if(this.form.offlinePrices.length == 0){
						this.form.offlinePrices.push({
							factoryPrice: '', //出厂价格
							customPrice: '', //定制价格
							tonPrice: '', //吨价
							departmentIds: [], //应用范围（部门ID，逗号分隔）0代表全部
							departmentIds1:[],
							remark: '', //备注
						})
					}else{
						for(let key in this.form.offlinePrices){
							this.form.offlinePrices[key].departmentIds1 = this.form.offlinePrices[key].departmentIds ? this.form.offlinePrices[key].departmentIds.split(',') : []
							// if(this.form.offlinePrices[key].departmentIds1.length > 0){
							// 	this.form.offlinePrices[key].departmentIds1 = this.form.offlinePrices[key].departmentIds.split(',')
							// }else{
							// 	this.form.offlinePrices[key].departmentIds1 = []
							// }
						}
					}
				})
			},
			// 产品联想搜索
			remoteMethod(query) {
				if (query !== '') {
					this.loading = true;
					listProduct({
						keyword: query,
						status:0,//产品开启状态
						
					}).then(res => {
						this.productList = res.rows
						this.loading1 = false;
					})
				} else {
					this.productList = [];
				}
			},
			// 关联产品
			// chooseProduct(){
			// 	this.$refs.dialog.open()
			// },
			//产品列表
			getProduct(){
				listProduct().then(res => {
					this.productList = res.rows
				})
			},
			//商品分类
			getTree() {
				listClassify1().then(res => {
					if (res.code == 200) {
						let dataArr = res.data
						for (let key in dataArr) {
							dataArr[key].label = dataArr[key].name
						}
						this.cateOptions = this.handleTree(dataArr)
						this.getUserList()
					}
				})
			},
			// 获取部门
			getUserList() {
				listDept().then((response) => {
				   this.deptOptions = this.handleTree(response.data, "deptId");
				});
			},
			//添加
			submitProduct(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if(this.form.onlineUnitPrice == '' || this.form.onlineUnitPrice*1 < 0){
							this.$modal.msgError('请确认线上渠道单价')
							return false;
						}else if(this.form.caseUnitPrice == '' || this.form.caseUnitPrice*1 < 0){
							this.$modal.msgError('请确认线上渠道箱价')
							return false;
						}else if(this.form.tonPrice == '' || this.form.tonPrice*1 < 0){
							this.$modal.msgError('请确认线上渠道吨价')
							return false;
						}
						if(this.form.offlinePrices.length > 0){
							for(let key in this.form.offlinePrices){
								// 判断三个价格是否都填写
								if(this.form.offlinePrices[key].factoryPrice == '' || this.form.offlinePrices[key].factoryPrice*1 < 0){
									this.$modal.msgError('请确认线下渠道单价')
									return false;
								}else if(this.form.offlinePrices[key].customPrice == '' || this.form.offlinePrices[key].customPrice*1 < 0){
									this.$modal.msgError('请确认线下渠道箱价')
									return false;
								}else if(this.form.offlinePrices[key].tonPrice == '' || this.form.offlinePrices[key].tonPrice*1 < 0){
									this.$modal.msgError('请确认线下渠道吨价')
									return false;
								}
								if(this.form.offlinePrices[key].departmentIds1.length > 0){
									this.form.offlinePrices[key].departmentIds = this.form.offlinePrices.length == 1 ? 0 : this.form.offlinePrices[key].departmentIds1.join(',')
								}else{
									this.form.offlinePrices[key].departmentIds = ''
								}
							}
						}
						// 新增
						if (this.form.id == '') {
							addGoods(this.form).then(response => {
								this.$modal.msgSuccess('添加成功')
								this.dialogVisible = false
								this.$emit('refreshList')
							})
						} else {
							// 编辑
							updateGoods(this.form).then(response => {
								this.$modal.msgSuccess('编辑成功')
								this.dialogVisible = false
								this.$emit('refreshList')
							})
						}
					} else {
						return false;
					}
				});
			},
			// 删除
			del(index) {
				this.form.offlinePrices.splice(index, 1);
			},
			handleAdd() {
				let item = {
					factoryPrice: '', //出厂价格
					customPrice: '', //定制价格
					tonPrice: '', //吨价
					departmentIds: [], //应用范围（部门ID，逗号分隔）0代表全部
					departmentIds1:[],
					remark: '', //备注
				}
				this.form.offlinePrices.push(item)
			},
			// 重置
			resetQuery() {
				this.form = {
					id: '',
					classifyId: '',
					commodityType: '', //产品类型
					productId: '', //关联产品id
					specificationId: '', //
					commodityName: '', //商品名称
					commodityCode: '', //商品id
					commodityPublic: '', //是否公海0=正常1=部门公海2=公司公海
					minUnit: '', //最小单位
					caseQuantity: '', //整件数量
					commission:'',//提成系数
					isPackage:0,//是否是套餐商品，默认不是
					unitContent: '', //单位含量
					contentUnit: '1004', //含量单位
					mainImageUrl: '', //商品主图
					onlineUnitPrice: '', //线上拆箱单价
					caseUnitPrice: '', //整箱单价
					tonPrice: '', //吨价
					boxConversionUnitPrice:'',//折算箱价
					tonConversionUnitPrice:'',//折算吨价
					offlinePrices: [{
						factoryPrice: '', //出厂价格
						customPrice: '', //定制价格
						tonPrice: '', //吨价
						departmentIds:'', //应用范围（部门ID，逗号分隔）0代表全部
						departmentIds1:'',
						remark: '', //备注
					}],
					remark: '', //备注
				}
				return true
			},
		}
	}
</script>

<style>
	.avatar-uploader .el-upload {
		background: #F7F8FA;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
		width: 110px;
		height: 110px;
		text-align: center;
		line-height: 22px;
		color: #8c939d;
	}
	
	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}
	
	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		text-align: center;
	}
</style>